<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			* {
			    padding: 0;
			    margin: 0;
			}
			body {
				background: url(img/beijing.jpg);
				background-repeat: no-repeat;
				
				background-size: cover;
			    background-color: #fb9d3b;
			    overflow: hidden;
			}
			/*
			    animation  各参数意思
			    关键帧动画名称
			    动画执行时间
			    动画延迟时间
			    动画执行次数
			    动画的执行速度函数
			    动画执行方向  alternate  间隔的顺序 ( 0 到 100 到 0 到 100 )
			                 reverse    反向运动   (100 到 0 )
			                 reverse-alternate   反向间隔运动
			    动画执行模式  forwards(动画停止在最后一个关键帧的位置)
			                 backwards (动画第一个关键帧立即执行)
			                 both(两者都 即立即作用第一个关键帧也停止在最后一个关键帧)
			*/
			#wrapper img {
			    position: absolute;
			    transform: translateY(-100%);        /*下落动画*/
			    animation: dropDowm 3s forwards;     /*旋转动画*/
			}
			@keyframes dropDowm{
			    0% {
			        top: 0px;
			        transform: translateY(-100%) rotate(0deg);   
			    }
			    100% {
			        top: 110%;
			        transform: translateY(0%) rotate(360deg);
			    }
			}
			
			#modol {
			    display: none;
			}
			
			#modol::before {
			    content: '';
			    position: fixed;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    background-color: rgba(0,0,0, 0.5);
			}
			
			#hb {
			    width: 350px;
			    height: 450px;
			    border-radius: 20px;
			    background-color: #e7223e;
			    color: #fad755;
			    position: fixed;
			    left: 50%;
			    top: 50%;
			    margin-top: -225px;
			    margin-left: -175px;
			    font-size: 30px;
			    font-weight: 900;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
			}
			#btn {
			    background-color: #fad755;
			    color: #e7223e;
			    font-size: 18px;
			    margin-top: 10px;
			    padding: 10px;
			    border:none;
			    outline: none;
			    cursor: pointer;
			}
			#www{
				background-color: #fad755;
				
				color: #e7223e;
				font-size: 18px;
				
				margin-left:130px;
				padding: 10px;
				border:none;
				outline: none;
				cursor: pointer;
			}
			#xxx{
				text-decoration: none;
				color: white;
				position: fixed;
				top: 20px;
				right: 100px;
				
			}
		</style>
	</head>
	<body>
		<a href="index.html" id="xxx">X</a>
		<div id="wrapper">
			
		    <img src="images/hb/petal1.png" >
		</div><div id="modol">
		    <div id="hb">
		        <div id="text"></div>
		        <div id="btn">继续抢红包</div>
		    </div>
		</div>
	
	</body>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
			function getCookie(cookieName) {
    var strCookie = document.cookie;
    var arrCookie = strCookie.split("; ");
    for(var i = 0; i < arrCookie.length; i++){
        var arr = arrCookie[i].split("=");
        if(cookieName == arr[0]){
            return arr[1];
        }
    }
    return "";
}
		
	


		
		
		
		function init() {
		    var dom = createDom(40);
		    var wrapper = document.getElementById('wrapper');
		    wrapper.appendChild(dom);
		    bindEvent();
		}
		
		var totalMoney = 0;   //保存所有抢到的红包总金额
		var delayTime = 0;
		var lastImg = null;   //最后一张掉落的图片
		
		//创建红包结构, num代表红包个数
		function createDom(num) {
		    var frag = document.createDocumentFragment();  //创建文档碎片
		    for(var i = 0; i < num; i ++) {
		        var img = new Image();
		        img.src = './images/hb/petal' + ranNum(0,10) + '.png';
		        img.style.left = ranNum(0, window.innerWidth) + 'px';      //让红包散列分布
		        var delay = ranNum(0,100) / 10;
		        img.style.animationDelay = delay + 's';                   //设置红包出现时间
		        if(delayTime < delay) {
		            delayTime = delay;
		            lastImg = img;
		        }
		        //data-money
		        img.dataset.money = ranNum(0,100) / 100;     //设置每个红包的钱数
		        frag.appendChild(img);
		    }
		    return frag;
		}
		
		//绑定点击事件
		function bindEvent() {
			
		    var wrapper = document.getElementById('wrapper'),
		        imgList = document.getElementsByTagName('img'),
		        modol = document.getElementById('modol'),
		        text = document.getElementById('text'),
		        btn = document.getElementById('btn');    //点击红包事件
		    addEvent(wrapper, 'mousedown', function(e) {      
		        var event = e || window.event,
		            target = event.target || event.srcElement,
		            money = event.target.dataset.money;
				
		        if(money) {
		            text.innerText = '恭喜抢到红包' + money + '元';
					
					
		            for(var i = 0, len = imgList.length; i < len; i ++) {
		                imgList[i].style.animationPlayState = 'paused';
		            }
		            modol.style.display = 'block';
		            totalMoney += Number(money);
		        }
		    });    //点击继续抢红包按钮事件
		    addEvent(btn, 'click', function() {
		        modol.style.display = 'none';
		        for(var i = 0, len = imgList.length; i < len; i ++) {
		            imgList[i].style.animationPlayState = 'running';
				
		        }
		    });　　//监听最后一个红包动画完成
		    addEvent(lastImg, 'webkitAnimationEnd', function() {
		        modol.style.display = 'block';
		        text.innerText = '恭喜总共抢到了' + totalMoney.toFixed(2) + '元';
					text.innerHTML+="</br>"
				text.innerHTML+="<button id='www' onclick='xxx("+totalMoney.toFixed(2)+")'>确定</button>";
				
				
		        btn.style.display = 'none';
		    });
		}
		
		//min 到 max 之间的随机数
		function ranNum(min, max) {
		    return Math.ceil(Math.random()*(max - min) + min);
		}
		
		//兼容的 添加事件函数
		function addEvent(elem, type, handle) {
		    if (elem.addEventListener) {
		        elem.addEventListener(type, handle, false);
		    } else if (elem.attachEvent) {
		        elem.attachEvent('on' + type, function() {
		            handle.call(elem);
		        })
		    } else {
		        elem['on' + type] = handle;
		    }
		}
		
	function xxx (x) {
		 chahuo()
		$.ajax({
			xhrFields:{withCredentials: true},
			url:"http://localhost:16111/activity/hongbaoyu",
			method: "get",
			dataType: "json",
			data:{
				user_id:getCookie("userid"),
				qian:x,
				},
			success:function(data){
			
			
			},
			errer:function(){
				alert("no")
			}
		})
		xiuhuo();
		location.href="index.html"
		
		
	}
		init();
		function chahuo() {
		
			
			
			if(getCookie("userid")==null){
				location.href="login.html";
				reture;
			}
		$.ajax({
			xhrFields:{withCredentials: true},
	url:"http://localhost:16111/activity/chacss",
	type:"get",
	data:{
		user_id:getCookie("userid"),
		nm:"红包雨"
	},
		success:function(date){
		
	if(date==0){
		addhuo()
		
	}else{

		xiuhuo()
		
		
	}
	
		
	}
	
})
}

function addhuo(){
	$.ajax({
		xhrFields:{withCredentials: true},
		url:"http://localhost:16111/activity/addhuo",
		type:"get",
		data:{
			user_id:getCookie("userid"),
			nm:"红包雨"
		},
			success:function(date){
		}
		
	})
	
}
function xiuhuo(){
	
	
	$.ajax({
		xhrFields:{withCredentials: true},
		url:"http://localhost:16111/activity/xiuhuo",
		type:"get",
		data:{
			user_id:getCookie("userid"),
			nm:"红包雨"
		},
			success:function(date){
				if(date==0){alert("您的抽奖次数已用完")
				window.location.href="index.html";
			}
		}
		
	})
	
}
		
	</script>
</html>
